<template>
  <div class="departments">
    <el-card class="box">
      <el-tabs>
        <el-tab-pane label="组织结构">
          <div class="main">
            <TreeItem />
            <hr>
            <el-tree default-expand-all>
              <template v-slot="{}">
                <TreeItem style="width: 100%" />
              </template>
            </el-tree>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <DialogItem />
  </div>
</template>

<script>
import TreeItem from './components/tree-item.vue'
import DialogItem from './components/dialog-item.vue'
export default {
  name: 'Departments',
  components: {
    TreeItem,
    DialogItem
  },
  data() {
    return {
      header: {
        name: '青鸢科技有限公司',
        manager: '负责人'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  padding: 20px;
  .el-tabs {
    padding-left: 30px;
    .main {
      width: 80%;
      margin: 30px auto 0;
      .tree-item {
        width: 100%;
        color: #000;
        display: flex;
        .s1 {
          flex: 1;
        }
        .s2 {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
